$(function () {
    //下拉框
    let list = $(".ss_list")
    let list1 = $(".ss_list_bg")
    list.hover(function () {
        list1.slideDown()
    }, function () {
        list1.slideUp()
    })
    //所搜框
    $(".s_ipt").focus(function () {
        $(".s_ipt").attr("placeholder", '')
    })
    $(".s_ipt").blur(function () {
        $(".s_ipt").attr("placeholder", '请输入关键字')
    })
    $(".s_btn").click(function () {
        let v = $(".s_ipt").val().trim()
        if (!v || v.length === 0) {
            alert("搜索不能为空！")
        }
    })

    $("#choice1 li").click(function () {
        $(this).addClass('checked').siblings().removeClass('checked')
    })
    $("#choice2 li").click(function () {
        $(this).addClass('checked').siblings().removeClass('checked')
    })



    $(".n_btn_1").click(function () {
        let val = $(".n_ipt").val()
        val++
        $(".n_ipt").attr("value", val)
    })
    $(".n_btn_2").click(function () {
        let val = $(".n_ipt").val()
        val--
        if (val <= 0) {
            val = 1
        }
        $(".n_ipt").attr("value", val)
    })

    //推荐搭配
    function Num() {
        let check = $(".checkbox input:checked")
        $(".sum_ipt").val(check.length)
        $(".checkbox input").on("change", function () {
            Num()
            Sum()
        })
    }
    Num()
    //套餐价格
    function Sum() {
        let sum = 0
        $(".checkbox input:checked").each(function () {
            let price = parseInt($(this).parent().next().html().substring(1))
            sum += price
        })
        $(".team_sum>span").text(sum)
    }
    Sum()


    function all() {
        function fn2() {
            //购物车
            $('.i_car').hover(function () {
                $(".last").css({ display: 'block' })
            },
                function () {
                    $(".last").css({ display: 'none' })
                })
            //减号的操作
            $(".J_btnDelCount").each(function () {
                //获取单价并转换成js
                let m = $(this).parent().next()[0].innerHTML
                //截取后面一位
                m = m.substring(1)
                //获取input值并转换成js
                let n = $(this).next()[0].value
                //计算单价
                m = m / n
                console.log(m);
                //on动态添加
                $(this).on('click', function () {
                    //重新获取input
                    n = $(this).next()[0].value
                    //减减操作
                    n--
                    //判断是否小于0
                    if (n <= 0) {
                        //重新赋值next下
                        $(this).next()[0].value = 1
                    } else {
                        //大于1时执行下一步对input进行赋值
                        $(this).next()[0].value = n
                        //计算单个总价并转换成js输入内容
                        $(this).parent().next()[0].innerHTML = `￥${m * n}`
                        //计算单个总数向页面输出{parent()返回父级元素}
                        let a = $(this).parent().parent().parent().parent().parent()
                        a.find('h4 span')[0].innerHTML = `共${n}件商品`
                        //计算所有的总价
                        fn()
                        //计算所有的总数
                        fn1()
                    }

                })
            })
            //加号操作
            $(".J_btnAddCount").each(function () {
                //获取单价并转换成js
                let m = $(this).parent().next()[0].innerHTML
                //截取后面一位
                m = m.substring(1)
                //on动态添加
                $(this).on('click', function () {
                    //获取find()找子元素，括号里面是找的有该属性的元素
                    let n = $(this).parent().find('input')[0].value
                    //加加操作
                    n++
                    //对input进行重新赋值
                    $(this).parent().find('input')[0].value = n
                    //计算单个总价并转换成js输入内容
                    $(this).parent().next()[0].innerHTML = `￥${m * n}`
                    //计算单个总数向页面输出{parent()返回父级元素}
                    let a = $(this).parent().parent().parent().parent().parent()
                    a.find('h4 span')[0].innerHTML = `共${n}件商品`
                    //计算所有的总价
                    fn()
                    //计算所有的总数
                    fn1()
                })

            })

            //删除
            //遍历页面中的叉号
            $(".J_btnDelete").each(function () {
                //on动态添加
                $(this).on('click', function () {
                    let flag2 = confirm('确认删除该商品吗？')
                    if (flag2) {
                        //remove()移出元素
                        $(this).parent().parent().parent().parent().remove()
                        //计算所有的总价
                        fn()
                        //计算所有的总数
                        fn1()
                        //判断一个元素是否存在用他的length属性
                        if ($(".J_btnDelete").length === 0) {
                            $('.noshop').show()
                        }
                    }
                })
            })
        }
        fn2()
        //合计
        function fn() {
            //声明一个变量用于保存值
            let num = 0
            //遍历所有单个的总价
            $('.J_smallTotalPrice').each(function () {
                //获取值
                let s = $(this)[0].innerHTML
                //截取字符并累加赋值
                num += parseInt(s.substring(1))
            })
            // console.log(num);
            //向页面合计总价输出内容
            $('.J_totalPrice')[0].innerHTML = `￥${num}`
        }
        fn()
        //结算
        function fn1() {
            //声明一个常量进行累加保存
            let sum = 0
            //遍历所有的单个数量
            $(".J_inputCount").each(function () {
                //累加保存所有的单个数量
                sum += parseInt($(this)[0].value)
            })
            // console.log(sum);
            //向页面中输出总数量
            $(".J_totalCount")[0].innerHTML = `(${sum})`
        }
        fn1()
    }
    all()
    //添加新的商品
    $(".fl").click(function () {
        alert('加入购物车成功！')
        let src = "images/shop3.png"
        let num = $(".n_ipt").val()
        let p = parseInt($('.des_price b').text().substring(1))
        let price1 = num * p
        let str = `<li>
        <h4>珠韵首饰旗舰店 <span class="J_count">共${num}件商品</span></h4>
        <div class="clear">
            <div class="shopImg">
                <img src="${src}" alt="" />
            </div>
            <div class="shopText">
                <div class="clear">
                    <h5>珠韵首饰 冰韵 天然白色正圆S925银扣珍珠项链</h5>
                    <a href="#" class="close J_btnDelete">X</a>
                </div>
                <p>淡水白色近圆珍珠</p>
                <div class="clear">
                    <div class="plush">
                        <span class="J_btnDelCount">-</span>
                        <input class="J_inputCount" type="text" value="${num}" />
                        <span class="J_btnAddCount">+</span>
                    </div>
                    <strong class="J_smallTotalPrice ">¥${price1} </strong>
                </div>
            </div>
        </div>
        <p>全场包邮</p>
    </li>`
        $('.shop>ul').append(str)
        all()
    })
    //商品分类弹框
    $(".fj").parent().each(function () {
        $(this).hover(function () {
            $(this).find('.zj').css({ display: 'block' })
        },
            function () {
                $(this).find('.zj').css({ display: 'none' })
            })
    })


})